<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="report" content='{"pid": "blog", "spm":"1001.2101"}'>
    <meta name="referrer" content="always">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="applicable-device" content="pc">
    <meta name="keywords" content="Element">
    <title>element</title>
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="bgcolor container-fluid">
      <div class="navbar navbar-fixed-top navbar-inverse" > 
        <div class="container">
          <a class="page-logo" href="#">
            <img src="images/logo_top.png"/>
          </a>
          <nav class="navbar navbar-expand-md navbar-light bg-faded">
            <a class="navbar-brand" href="#">Navbar</a>
              <!-- <a class="navbar-brand" href="#">Navbar</a> -->
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-expanded="false">
                <span class="menu-color">&#9776;</span>
              </button>
            
            <!-- 切换菜单内容 -->
            <div class="collapse navbar-collapse" id="exCollapsingNavbar">
              <ul class="nav navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#"><span class="menu-color">About ELT</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/pdf/Element Whitepaper V1.0.pdf"><span class="menu-color">Whitepaper</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#" data-toggle="modal" data-target="#myModal"><span class="menu-color">Contract</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#"><span class="menu-color">News</span></a>
                </li>
              </ul>
            </div>
          </nav>
        </div>



              <!-- 模态框 -->
        <div class="modal fade" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content">
        
              <!-- 模态框头部 -->
              <!-- <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div> -->
        
              <!-- 模态框主体 -->
              <div class="modal-body">
                <div class="contract-detail">
                  <label>Contract Address：</label>
                  <span class="contract-addr">0x7313cb4Fc034C316657638d9A1a443F9e6437750</span><br/>
                  <label>Total Supply:</label>
                  <span class="contract-total">2 Billion</span>
                </div>
              </div>
        
    
        
            </div>
          </div>
        </div>
  
      <!-- 分割线 -->
      <div class="hr-line"></div> 
      <!-- banner -->
      <div class="banner row justify-content-center offset-md-1 offset-lg-1 offset-sm-1 col-12 col-md-10 col-lg-10 col-sm-10">
        <!-- <div id="banner" class="carousel slide" data-ride="carousel" data-interval="2000">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="images/banner.jpg">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="images/banner.jpg">
            </div>
          </div>
        </div> -->
        <video controls="" width="100%" height="100%" autoplay="autoplay" volume="1" id="myvideo" loop="loop" muted>
          <source id="media_src" src="images/element-en.mp4" type="video/mp4"/>
        </video>
      </div>
      <!-- 分割线 -->
      <div class="hr-line"></div> 

      <div class="row justify-content-around offset-md-1 offset-lg-1 offset-sm-1 col-12 col-md-10 col-lg-10 col-sm-10">
          
            <div class="ele-future d-flex flex-column align-items-center col-6 col-md-2 col-sm-4">
              <img src="images/NFT.png"/>
              <div class="mt-2">NFT</div>
            </div>
            <div class="ele-future d-flex flex-column align-items-center col-6 col-md-2 col-sm-4">
              <img src="images/DEFI.png"/>
              <div class="mt-2">DEFI</div>
            </div>
            <div class="ele-future d-flex flex-column align-items-center col-6 col-md-2 col-sm-4">
              <img src="images/GAMES.png"/>
              <div class="mt-2">GAMES</div>
            </div>
            <div class="ele-future d-flex flex-column align-items-center col-6 col-md-2 col-sm-6">
              <img src="images/TECHNOLOGY.png"/>
              <div class="mt-2">TECHNOLOGY</div>
            </div>
            <div class="ele-future d-flex flex-column align-items-center flex-shrink-0 col-12 col-md-2 col-sm-6">
              <img src="images/FILM EXCHANGE.png"/> 
              <div class="mt-2">IP EQUITY EXCHANGE</div>
            </div>
      
          
      </div>
        <!-- roadmap -->
      <div class="roadmap row justify-content-center mt-5 offset-md-1 offset-lg-1 offset-sm-1 col-12 col-md-10 col-lg-10 col-sm-10">
        <div>
          <div>
            <img class="mb-2 img-fluid" src="images/t_Roadmap.png"/>
          </div>
          <div>
            <img class="img-fluid" src="images/Roadmap.png"/>
          </div>
        </div>
      </div>
        <!-- news -->
      <div class="news row justify-content-center mt-5">
        <img class="img-fluid" src="images/news.png"/>
        <img class="img-fluid" src="images/news_bg.jpg"/>
      </div>
        <!-- new content -->
      <div class="new-content row mt-5 justify-content-between offset-md-1 offset-lg-1 offset-sm-1 col-12 col-md-10 col-lg-10 col-sm-10">
        <!-- 新闻第一栏 -->
        <div class="new-items">
          <ul>
            <li class="news-item row align-items-center">
              <span class="arrow mr-1"></span>
              <a href="#">Coming soon!</a>
            </li>
            <!-- <li class="news-item row align-items-center mt-3">
              <span class="arrow mr-1"></span>
              <a href="#">2021年6月15日在羊城举行盛大活动</a>
            </li>
            <li class="news-item row align-items-center mt-3">
              <span class="arrow mr-1"></span>
              <a href="#">会议取得圆满结束</a>
            </li> -->
          </ul>
        </div>
        <!-- 新闻第二栏 -->
        <div class="new-items">
          <!-- <ul>
            <li class="news-item row align-items-center">
              <span class="arrow mr-1"></span>
              <a href="#">2021年6月15日在羊城举行盛大活动</a>
            </li>
            <li class="news-item row align-items-center mt-3">
              <span class="arrow mr-1"></span>
              <a href="#">2021年6月15日在羊城举行盛大活动</a>
            </li>
            <li class="news-item row align-items-center mt-3">
              <span class="arrow mr-1"></span>
              <a href="#">会议取得圆满结束</a>
            </li>
          </ul> -->
        </div>
        <!-- 新闻第三栏 -->
        <div class="new-items">
          <!-- <ul>
            <li class="news-item row align-items-center">
              <span class="arrow mr-1"></span>
              <a href="#">2021年6月15日在羊城举行盛大活动</a>
            </li>
            <li class="news-item row align-items-center mt-3">
              <span class="arrow mr-1"></span>
              <a href="#">2021年6月15日在羊城举行盛大活动</a>
            </li>
            <li class="news-item row align-items-center mt-3">
              <span class="arrow mr-1"></span>
              <a href="#">会议取得圆满结束</a>
            </li>
          </ul> -->
        </div>
      </div>
      <!-- 新闻结束 -->


      <footer class="row mt-5 offset-lg-1 offset-sm-1 col-12 col-md-10 col-lg-10 col-sm-10">
        <div class="footer-logo mb-2 col-12 col-sm-3 col-md-3 col-lg-3 d-flex flex-column align-items-center" >
          <img src="images/logo_down.png"/>
        </div>
        <div class="contact col-12 col-sm-3 col-md-3 col-lg-3 d-flex flex-column align-items-center">
          <div class="contact-top mb-2">Contact ELT</div>
          <div class="contact-elt"><a href="#">Join US</a></div>
          <div class="contact-elt"><a href="#">Marketing</a></div>
          <div class="contact-elt"><a href="#">EcoGrowth</a></div>
          <div class="contact-elt"><a href="#">General</a></div>
        </div>
        <div class="contact col-12 col-sm-3 col-md-3 col-lg-3 d-flex flex-column align-items-center">
          <div class="contact-top mb-2">For Media</div>
          <div class="contact-elt"><a href="#">About ELT</a></div>
          <div class="contact-elt"><a href="#">Press Kit</a></div>
    
        </div>
        <div class="contact col-12 col-sm-3 col-md-3 col-lg-3 d-flex flex-column align-items-center">
          <div class="contact-top mb-2">Keep in touch</div>
          <div class="media-icons d-flex flex-wrap align-content-between">
            <a href="https://www.facebook.com/profile.php?id=100070875120357"><img class="mx-1" src="images/Facebook.png"/></a>
            <a href="https://discord.gg/element/black#2148"><img class="mx-1" src="images/Discord.png"/></a>
            <a href="https://www.instagram.com/elt_element_black/"><img class="mx-1" src="images/Instagram.png"/></a>
            <a href="https://www.tiktok.com/@elementblack_official?lang=en"><img class="mx-1" src="images/Tiktok.png"/></a>
            <a href="https://www.youtube.com/channel/UCxhYiYczJcBhwsTL9pWtA-A"><img class="mx-1" src="images/YouTube.png"/></a>
            <a href="https://twitter.com/ELTblack"><img class="mx-1" src="images/Twitter.png"/></a>
            <a href="https://www.reddit.com/user/ELT_Element_Black"><img class="mx-1" src="images/Reddit.png"/></a>
            <!-- <a href=""><img class="mx-1" src="images/Contact_8.png"/></a> -->
          </div>
        </div>
      </footer>
      <div class="copyright row justify-content-center mt-5">
        <span>COPYRIGHT &nbsp;&copy; &nbsp;ELT &nbsp; TEAM &nbsp; 2020-2021</span>
      </div>
  </div>
  <script>
   $(function () { 
	    $("[data-toggle='popover']").popover();
    });
  </script>
  </body>
</html>